﻿@page "/Numeric-TextBox/Restrict-Decimals"

@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the decimal functionalities of the Numeric TextBox. Type a value in the input element to change dynamically, and it allows maximum of 3 decimal digits.</p>
</SampleDescription>
<ActionDescription>
   <p>The NumericTextBox provides an option to restrict the number of decimal values, by using the Decimals property. To restrict the number of decimal values on typing, use the <a target='_blank'href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_Decimals'>Decimals</a>. and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_ValidateDecimalOnType' target='_blank'> ValidateDecimalOnType</a> properties.</p>
   <p> More information about the NumericTextBox can be found in this<a target='_blank' href='https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started/#precision-of-numbers'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="control-label">
                Numeric Textbox
            </div>
            <SfNumericTextBox TValue="double?" ValidateDecimalOnType="true" Value=10 Format="n3" Decimals=3 Min=0></SfNumericTextBox>
            <div class="control-label">
                Percentage Textbox
            </div>
            <SfNumericTextBox TValue="double?" Format="p3" ValidateDecimalOnType="true" Decimals=3 Value=0.5 Max=1 Min=0 Step=0.01></SfNumericTextBox>
            <div class="control-label">
                Currency TextBox
            </div>
            <SfNumericTextBox TValue="double?" ValidateDecimalOnType="true" Format="c3" Decimals=3 Value=100></SfNumericTextBox>
        </div>
    </div>
</div>

<style>
    .content-wrapper {
        width: 35%;
        margin: 0 auto;
        min-width: 185px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }

    .e-float-input.e-numeric.e-input-group {
        margin-top: 40px;
    }
</style>
